<template>
  <transition name="fade">
    <div class="toTop" v-show='isShow'>
      <img src="./../assets/toTop.svg" alt="toTop" @click="toTop">
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      isShow : false
    }
  },
  methods : {
    toTop () {
      let time = setInterval(function () {
        document.body.scrollTop -= 100
        if (document.body.scrollTop <= 0) {
          clearInterval(time)
        }
      }, 10)
    },
    scrollMethod () {
      if(document.body.scrollTop >= 100) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    }
  },
  mounted() {
    window.addEventListener("scroll",this.scrollMethod)
  }
}
</script>

<style scoped>
.toTop {
  position: fixed;
  bottom: 3rem;
  right: 1rem;
  cursor: pointer;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
</style>
